<template>
	<div class="skewer1IntervalGraph" v-if="pageData" @click="cancelLeftClickMenu" @contextmenu.stop="cancelLeftClickMenu">
		<ScaleBox :width="2020">
			<MonitorHeader :title="$route.query.ftName">
			  <template v-slot:btns>
					<button @click="routerToIndexPage">画面索引</button>
			    <button @click="routerToMainPage">主接线图</button>
					<!-- <button>5011信号分图</button>
					<button>5012信号分图</button>
					<button>5013信号分图</button> -->
			    <button @click="clearAll($route.query.ftName)">画面清闪</button>
			  </template>
			</MonitorHeader>
			<div class="wrapper" ref="page">
				<div class="ctn">
					<div class="leftCtn">
						<svg style="width: 100%; height: 100%;">
							<g transform="translate(100,375)">
								<!-- <text x="180" y="400" style="fill: #fff;font-size: 12px;">500kVⅡ母</text> -->
								<main-bus name="220kVⅡ母" x1="55" y1="410" x2="220" y2="410" stateDesc="220kVⅡ母" color="rgb(250,0,0)"></main-bus>
								<line x1="100" y1="365" x2="100" y2="410" stroke-width="2" stroke="rgb(250,0,0)"></line>
								<!-- 5013-2 -->
								<connect-line
									:state="Number(pageData.glg[5].state_val)"
									:stateDesc="pageData.glg[5].state_desc"
									:scale="0.6"
									:rotate="90"
									:translate-x="124"
									:translate-y="338"
									:text-translate-y="-7"
									:text-translate-x="10"
									:name="pageData.glg[5].state_desc"
									:info="pageData.glg[5]"
									@itemRightClick="itemRightClick"
									>
								</connect-line>
								<line x1="100" y1="290" x2="100" y2="335" stroke-width="2" stroke="rgb(250,0,0)"></line>
								<!-- 5013 -->
								<rect-svg
									:state="Number(pageData.dlq[2].state_val)"
									:stateDesc="pageData.dlq[2].state_desc"
									:rotate="90"
									:translate-x="128"
									:translate-y="263"
									:text-translate-x="-50"
									:text-translate-y="-4"
									:scale="0.7"
									:itemObj="{is_clear:pageData.dlq[2].is_clear}"
									:name="pageData.dlq[2].state_desc"
									:info="pageData.dlq[2]"
									@itemRightClick="itemRightClick"
								></rect-svg>
								<line x1="100" y1="219" x2="100" y2="264" stroke-width="2" stroke="rgb(250,0,0)"></line>
								<!-- 5013-1 -->
								<connect-line
									:state="Number(pageData.glg[4].state_val)"
									:stateDesc="pageData.glg[4].state_desc"
									:scale="0.6"
									:rotate="90"
									:translate-x="124"
									:translate-y="192"
									:text-translate-y="-7"
									:text-translate-x="10"
									:name="pageData.glg[4].state_desc"
									:info="pageData.glg[4]"
									@itemRightClick="itemRightClick"
									>
								</connect-line>
								<line x1="100" y1="144" x2="100" y2="189" stroke-width="2" stroke="rgb(250,0,0)"></line>
								<!-- 5012-2 -->
								<connect-line
									:state="Number(pageData.glg[3].state_val)"
									:stateDesc="pageData.glg[3].state_desc"
									:scale="0.6"
									:rotate="90"
									:translate-x="124"
									:translate-y="117"
									:text-translate-y="-7"
									:text-translate-x="10"
									:name="pageData.glg[3].state_desc"
									:info="pageData.glg[3]"
									@itemRightClick="itemRightClick"
									>
								</connect-line>
								<line x1="100" y1="69" x2="100" y2="114" stroke-width="2" stroke="rgb(250,0,0)"></line>
								<!-- 5012 -->
								<rect-svg
									:state="Number(pageData.dlq[1].state_val)"
									:stateDesc="pageData.dlq[1].state_desc"
									:rotate="90"
									:translate-x="128"
									:translate-y="44"
									:text-translate-x="-50"
									:text-translate-y="-4"
									:scale="0.7"
									:itemObj="{is_clear:pageData.dlq[1].is_clear}"
									:name="pageData.dlq[1].state_desc"
									:info="pageData.dlq[1]"
									@itemRightClick="itemRightClick"
								></rect-svg>
								<line x1="100" y1="1" x2="100" y2="46" stroke-width="2" stroke="rgb(250,0,0)"></line>
								<!-- 5012-1 -->
								<connect-line
									:state="Number(pageData.glg[2].state_val)"
									:stateDesc="pageData.glg[2].state_desc"
									:scale="0.6"
									:rotate="90"
									:translate-x="124"
									:translate-y="-26"
									:text-translate-y="-7"
									:text-translate-x="10"
									:name="pageData.glg[2].state_desc"
									:info="pageData.glg[2]"
									@itemRightClick="itemRightClick"
									>
								</connect-line>
								<line x1="100" y1="-74" x2="100" y2="-29" stroke-width="2" stroke="rgb(250,0,0)"></line>
								<!-- 5011-2 -->
								<connect-line
									:state="Number(pageData.glg[1].state_val)"
									:stateDesc="pageData.glg[1].state_desc"
									:scale="0.6"
									:rotate="90"
									:translate-x="124"
									:translate-y="-100"
									:text-translate-y="-7"
									:text-translate-x="10"
									:name="pageData.glg[1].state_desc"
									:info="pageData.glg[1]"
									@itemRightClick="itemRightClick"
									>
								</connect-line>
								<line x1="100" y1="-149" x2="100" y2="-104" stroke-width="2" stroke="rgb(250,0,0)"></line>
								<!-- 5011 -->
								<rect-svg
									:state="Number(pageData.dlq[0].state_val)"
									:stateDesc="pageData.dlq[0].state_desc"
									:rotate="90"
									:translate-x="128"
									:translate-y="-176"
									:text-translate-x="-50"
									:text-translate-y="-4"
									:scale="0.7"
									:itemObj="{is_clear:pageData.dlq[0].is_clear}"
									:name="pageData.dlq[0].state_desc"
									:info="pageData.dlq[0]"
									@itemRightClick="itemRightClick"
								></rect-svg>
								<line x1="100" y1="-220" x2="100" y2="-175" stroke-width="2" stroke="rgb(250,0,0)"></line>
								<!-- 5011-1 -->
								<connect-line
									:state="Number(pageData.glg[0].state_val)"
									:stateDesc="pageData.glg[0].state_desc"
									:scale="0.6"
									:rotate="90"
									:translate-x="124"
									:translate-y="-247"
									:text-translate-y="-7"
									:text-translate-x="10"
									:name="pageData.glg[0].state_desc"
									:info="pageData.glg[0]"
									@itemRightClick="itemRightClick"
									>
								</connect-line>
								<line x1="100" y1="-296" x2="100" y2="-251" stroke-width="2" stroke="rgb(250,0,0)"></line>
								<!-- <text x="180" y="-245" style="fill: #fff;font-size: 12px;">500kVⅠ母</text> -->
								<main-bus name="500kVⅠ母" x1="55" y1="-299" x2="220" y2="-299" stateDesc="500kVⅠ母" color="rgb(250,0,0)"></main-bus>
								
								<text x="-90" y="-285" style="fill: #fff;font-size: 16px;">#2主变</text>
								<polyline points="-70,-255 -80,-265 -90,-255" style="stroke: rgb(250,0,0);stroke-width: 2;fill:transparent;"></polyline>
								<polyline points="-80,-265 -80,-45 100,-45" style="stroke: rgb(250,0,0);stroke-width: 2;fill:transparent;"></polyline>
								<polyline points="-80,375 -80,165 100,165" style="stroke: rgb(250,0,0);stroke-width: 2;fill:transparent;"></polyline>
								<polyline points="-70,365 -80,375 -90,365" style="stroke: rgb(250,0,0);stroke-width: 2;fill:transparent;"></polyline>
								<text x="-90" y="400" style="fill: #fff;font-size: 16px;">桂元Ⅰ线</text>
								
								<g transform="translate(-80,-385)">
									<g transform="translate(15, 10)">
										<line x1="36" y1="192" x2="36" y2="200" stroke-width="2" stroke="rgb(250,0,0)"></line>
										<!-- <rect width="11" height="25" x="30" y="200" style="fill: rgb(250,0,0);"></rect> -->
										<rect-svg
											:state="Number(pageData.dlq[3].state_val)"
											:stateDesc="pageData.dlq[3].state_desc"
											:rotate="90"
											:translate-x="64"
											:translate-y="199"
											:text-translate-x="-9"
											:text-translate-y="28"
											:scale="0.7"
											:itemObj="{is_clear:pageData.dlq[3].is_clear}"
											:name="pageData.dlq[3].state_desc.slice(-1)"
											:info="pageData.dlq[3]"
											@itemRightClick="itemRightClick"
											:textColor="'#fbff1e'"
										></rect-svg>
										<line x1="36" y1="227" x2="36" y2="235" stroke-width="2" stroke="rgb(250,0,0)"></line>
										<!-- <text x="30" y="255" style="fill: #fbff1e;font-size: 16px;">A</text> -->
									</g>
									<g transform="translate(40, 10)">
										<line x1="36" y1="192" x2="36" y2="200" stroke-width="2" stroke="rgb(250,0,0)"></line>
										<!-- <rect width="11" height="25" x="30" y="200" style="fill: rgb(250,0,0);"></rect> -->
										<rect-svg
											:state="Number(pageData.dlq[4].state_val)"
											:stateDesc="pageData.dlq[4].state_desc"
											:rotate="90"
											:translate-x="64"
											:translate-y="199"
											:text-translate-x="-8"
											:text-translate-y="28"
											:scale="0.7"
											:itemObj="{is_clear:pageData.dlq[4].is_clear}"
											:name="pageData.dlq[4].state_desc.slice(-1)"
											:info="pageData.dlq[4]"
											@itemRightClick="itemRightClick"
											:textColor="'#79dd97'"
										></rect-svg>
										<line x1="36" y1="227" x2="36" y2="235" stroke-width="2" stroke="rgb(250,0,0)"></line>
										<!-- <text x="30" y="255" style="fill: #79dd97;font-size: 16px;">B</text> -->
									</g>
									<g transform="translate(65, 10)">
										<line x1="36" y1="192" x2="36" y2="200" stroke-width="2" stroke="rgb(250,0,0)"></line>
										<!-- <rect width="11" height="25" x="30" y="200" style="fill: rgb(250,0,0);"></rect> -->
										<rect-svg
											:state="Number(pageData.dlq[5].state_val)"
											:stateDesc="pageData.dlq[5].state_desc"
											:rotate="90"
											:translate-x="64"
											:translate-y="199"
											:text-translate-x="-9"
											:text-translate-y="28"
											:scale="0.7"
											:itemObj="{is_clear:pageData.dlq[5].is_clear}"
											:name="pageData.dlq[5].state_desc.slice(-1)"
											:info="pageData.dlq[5]"
											@itemRightClick="itemRightClick"
											:textColor="'#fd3430'"
										></rect-svg>
										<line x1="36" y1="227" x2="36" y2="235" stroke-width="2" stroke="rgb(250,0,0)"></line>
										<!-- <text x="30" y="255" style="fill: #fd3430;font-size: 16px;">C</text> -->
									</g>
								</g>
								
								<g transform="translate(-80,-165)">
									<g transform="translate(15, 10)">
										<line x1="36" y1="192" x2="36" y2="200" stroke-width="2" stroke="rgb(250,0,0)"></line>
										<!-- <rect width="11" height="25" x="30" y="200" style="fill: rgb(250,0,0);"></rect> -->
										<rect-svg
											:state="Number(pageData.dlq[6].state_val)"
											:stateDesc="pageData.dlq[6].state_desc"
											:rotate="90"
											:translate-x="64"
											:translate-y="199"
											:text-translate-x="-9"
											:text-translate-y="28"
											:scale="0.7"
											:itemObj="{is_clear:pageData.dlq[6].is_clear}"
											:name="pageData.dlq[6].state_desc.slice(-1)"
											:info="pageData.dlq[6]"
											@itemRightClick="itemRightClick"
											:textColor="'#fbff1e'"
										></rect-svg>
										<line x1="36" y1="227" x2="36" y2="235" stroke-width="2" stroke="rgb(250,0,0)"></line>
										<!-- <text x="30" y="255" style="fill: #fbff1e;font-size: 16px;">A</text> -->
									</g>
									<g transform="translate(40, 10)">
										<line x1="36" y1="192" x2="36" y2="200" stroke-width="2" stroke="rgb(250,0,0)"></line>
										<!-- <rect width="11" height="25" x="30" y="200" style="fill: rgb(250,0,0);"></rect> -->
										<rect-svg
											:state="Number(pageData.dlq[7].state_val)"
											:stateDesc="pageData.dlq[7].state_desc"
											:rotate="90"
											:translate-x="64"
											:translate-y="199"
											:text-translate-x="-8"
											:text-translate-y="28"
											:scale="0.7"
											:itemObj="{is_clear:pageData.dlq[7].is_clear}"
											:name="pageData.dlq[7].state_desc.slice(-1)"
											:info="pageData.dlq[7]"
											@itemRightClick="itemRightClick"
											:textColor="'#79dd97'"
										></rect-svg>
										<line x1="36" y1="227" x2="36" y2="235" stroke-width="2" stroke="rgb(250,0,0)"></line>
										<!-- <text x="30" y="255" style="fill: #79dd97;font-size: 16px;">B</text> -->
									</g>
									<g transform="translate(65, 10)">
										<line x1="36" y1="192" x2="36" y2="200" stroke-width="2" stroke="rgb(250,0,0)"></line>
										<!-- <rect width="11" height="25" x="30" y="200" style="fill: rgb(250,0,0);"></rect> -->
										<rect-svg
											:state="Number(pageData.dlq[8].state_val)"
											:stateDesc="pageData.dlq[8].state_desc"
											:rotate="90"
											:translate-x="64"
											:translate-y="199"
											:text-translate-x="-9"
											:text-translate-y="28"
											:scale="0.7"
											:itemObj="{is_clear:pageData.dlq[8].is_clear}"
											:name="pageData.dlq[8].state_desc.slice(-1)"
											:info="pageData.dlq[8]"
											@itemRightClick="itemRightClick"
											:textColor="'#fd3430'"
										></rect-svg>
										<line x1="36" y1="227" x2="36" y2="235" stroke-width="2" stroke="rgb(250,0,0)"></line>
										<!-- <text x="30" y="255" style="fill: #fd3430;font-size: 16px;">C</text> -->
									</g>
								</g>
								
								<g transform="translate(-80,55)">
									<g transform="translate(15, 10)">
										<line x1="36" y1="192" x2="36" y2="200" stroke-width="2" stroke="rgb(250,0,0)"></line>
										<!-- <rect width="11" height="25" x="30" y="200" style="fill: rgb(250,0,0);"></rect> -->
										<rect-svg
											:state="Number(pageData.dlq[9].state_val)"
											:stateDesc="pageData.dlq[9].state_desc"
											:rotate="90"
											:translate-x="64"
											:translate-y="199"
											:text-translate-x="-9"
											:text-translate-y="28"
											:scale="0.7"
											:itemObj="{is_clear:pageData.dlq[9].is_clear}"
											:name="pageData.dlq[9].state_desc.slice(-1)"
											:info="pageData.dlq[9]"
											@itemRightClick="itemRightClick"
											:textColor="'#fbff1e'"
										></rect-svg>
										<line x1="36" y1="227" x2="36" y2="235" stroke-width="2" stroke="rgb(250,0,0)"></line>
										<!-- <text x="30" y="255" style="fill: #fbff1e;font-size: 16px;">A</text> -->
									</g>
									<g transform="translate(40, 10)">
										<line x1="36" y1="192" x2="36" y2="200" stroke-width="2" stroke="rgb(250,0,0)"></line>
										<!-- <rect width="11" height="25" x="30" y="200" style="fill: rgb(250,0,0);"></rect> -->
										<rect-svg
											:state="Number(pageData.dlq[10].state_val)"
											:stateDesc="pageData.dlq[10].state_desc"
											:rotate="90"
											:translate-x="64"
											:translate-y="199"
											:text-translate-x="-8"
											:text-translate-y="28"
											:scale="0.7"
											:itemObj="{is_clear:pageData.dlq[10].is_clear}"
											:name="pageData.dlq[10].state_desc.slice(-1)"
											:info="pageData.dlq[10]"
											@itemRightClick="itemRightClick"
											:textColor="'#79dd97'"
										></rect-svg>
										<line x1="36" y1="227" x2="36" y2="235" stroke-width="2" stroke="rgb(250,0,0)"></line>
										<!-- <text x="30" y="255" style="fill: #79dd97;font-size: 16px;">B</text> -->
									</g>
									<g transform="translate(65, 10)">
										<line x1="36" y1="192" x2="36" y2="200" stroke-width="2" stroke="rgb(250,0,0)"></line>
										<!-- <rect width="11" height="25" x="30" y="200" style="fill: rgb(250,0,0);"></rect> -->
										<rect-svg
											:state="Number(pageData.dlq[11].state_val)"
											:stateDesc="pageData.dlq[11].state_desc"
											:rotate="90"
											:translate-x="64"
											:translate-y="199"
											:text-translate-x="-9"
											:text-translate-y="28"
											:scale="0.7"
											:itemObj="{is_clear:pageData.dlq[11].is_clear}"
											:name="pageData.dlq[11].state_desc.slice(-1)"
											:info="pageData.dlq[11]"
											@itemRightClick="itemRightClick"
											:textColor="'#fd3430'"
										></rect-svg>
										<line x1="36" y1="227" x2="36" y2="235" stroke-width="2" stroke="rgb(250,0,0)"></line>
										<!-- <text x="30" y="255" style="fill: #fd3430;font-size: 16px;">C</text> -->
									</g>
								</g>
								
								<g>
									<line x1="100" y1="-195" x2="150" y2="-195" stroke-width="2" stroke="rgb(250,0,0)"></line>
									<!-- 5011-17 -->
									<terminal-svg
										:state="Number(pageData.dd[0].state_val)"
										:stateDesc="pageData.dd[0].state_desc"
										:scale="0.7"
										:translate-x="197"
										:translate-y="-213"
										:rotate="90"
										:text-translate-y="-7"
										:text-translate-x="5"
										:name="pageData.dd[0].state_desc"
										:info="pageData.dd[0]"
										@itemRightClick="itemRightClick"
									></terminal-svg>
								</g>
								<g transform="translate(0,70)">
									<line x1="100" y1="-195" x2="150" y2="-195" stroke-width="2" stroke="rgb(250,0,0)"></line>
									<!-- 5011-27 -->
									<terminal-svg
										:state="Number(pageData.dd[1].state_val)"
										:stateDesc="pageData.dd[1].state_desc"
										:scale="0.7"
										:translate-x="197"
										:translate-y="-213"
										:rotate="90"
										:text-translate-y="-7"
										:text-translate-x="5"
										:name="pageData.dd[1].state_desc"
										:info="pageData.dd[1]"
										@itemRightClick="itemRightClick"
									></terminal-svg>
								</g>
								<g transform="translate(0,130)">
									<line x1="100" y1="-180" x2="150" y2="-180" stroke-width="2" stroke="rgb(250,0,0)"></line>
									<!-- 5011-67 -->
									<terminal-svg
										:state="Number(pageData.dd[2].state_val)"
										:stateDesc="pageData.dd[2].state_desc"
										:scale="0.7"
										:translate-x="197"
										:translate-y="-198"
										:rotate="90"
										:text-translate-y="-7"
										:text-translate-x="5"
										:name="pageData.dd[2].state_desc"
										:info="pageData.dd[2]"
										@itemRightClick="itemRightClick"
									></terminal-svg>
								</g>
								<g transform="translate(0,210)">
									<line x1="100" y1="-185" x2="150" y2="-185" stroke-width="2" stroke="rgb(250,0,0)"></line>
									<!-- 5012-17 -->
									<terminal-svg
										:state="Number(pageData.dd[3].state_val)"
										:stateDesc="pageData.dd[3].state_desc"
										:scale="0.7"
										:translate-x="197"
										:translate-y="-203"
										:rotate="90"
										:text-translate-y="-7"
										:text-translate-x="5"
										:name="pageData.dd[3].state_desc"
										:info="pageData.dd[3]"
										@itemRightClick="itemRightClick"
									></terminal-svg>
								</g>
								<g transform="translate(0,278)">
									<line x1="100" y1="-185" x2="150" y2="-185" stroke-width="2" stroke="rgb(250,0,0)"></line>
									<!-- 5012-27 -->
									<terminal-svg
										:state="Number(pageData.dd[4].state_val)"
										:stateDesc="pageData.dd[4].state_desc"
										:scale="0.7"
										:translate-x="197"
										:translate-y="-203"
										:rotate="90"
										:text-translate-y="-7"
										:text-translate-x="5"
										:name="pageData.dd[4].state_desc"
										:info="pageData.dd[4]"
										@itemRightClick="itemRightClick"
									></terminal-svg>
								</g>
								<g transform="translate(0,355)">
									<line x1="100" y1="-185" x2="150" y2="-185" stroke-width="2" stroke="rgb(250,0,0)"></line>
									<!-- 5013-67 -->
									<terminal-svg
										:state="Number(pageData.dd[8].state_val)"
										:stateDesc="pageData.dd[8].state_desc"
										:scale="0.7"
										:translate-x="197"
										:translate-y="-203"
										:rotate="90"
										:text-translate-y="-7"
										:text-translate-x="5"
										:name="pageData.dd[8].state_desc"
										:info="pageData.dd[8]"
										@itemRightClick="itemRightClick"
									></terminal-svg>
								</g>
								<g transform="translate(0,430)">
									<line x1="100" y1="-185" x2="150" y2="-185" stroke-width="2" stroke="rgb(250,0,0)"></line>
									<!-- 5013-17 -->
									<terminal-svg
										:state="Number(pageData.dd[6].state_val)"
										:stateDesc="pageData.dd[6].state_desc"
										:scale="0.7"
										:translate-x="197"
										:translate-y="-203"
										:rotate="90"
										:text-translate-y="-7"
										:text-translate-x="5"
										:name="pageData.dd[6].state_desc"
										:info="pageData.dd[6]"
										@itemRightClick="itemRightClick"
									></terminal-svg>
								</g>
								<g transform="translate(0,500)">
									<line x1="100" y1="-185" x2="150" y2="-185" stroke-width="2" stroke="rgb(250,0,0)"></line>
									<!-- 5013-27 -->
									<terminal-svg
										:state="Number(pageData.dd[7].state_val)"
										:stateDesc="pageData.dd[7].state_desc"
										:scale="0.7"
										:translate-x="197"
										:translate-y="-203"
										:rotate="90"
										:text-translate-y="-7"
										:text-translate-x="5"
										:name="pageData.dd[7].state_desc"
										:info="pageData.dd[7]"
										@itemRightClick="itemRightClick"
									></terminal-svg>
								</g>
							</g>
						</svg>
					</div>
					<div class="midCtn">
						<div class="midCtnTop">
							<p>TA变比 2500/1</p>
							<div class="midCtnTopWrapper">
								<el-table :data="tableData" style="width: 100%">
									<el-table-column prop="name" label="项目" align="center"></el-table-column>
									<el-table-column prop="one" label="5011" align="center">
										<template slot-scope="scope">
											<div @contextmenu.prevent.stop="checkVal(pageData['5011'].find(item => item.state_desc == scope.row.name), true)" style="cursor: pointer">{{ `${Number(scope.row.one).toFixed(2)}` }}</div>
										</template>
									</el-table-column>
									<el-table-column prop="two" label="5012" align="center">
										<template slot-scope="scope">
											<div @contextmenu.prevent.stop="checkVal(pageData['5012'].find(item => item.state_desc == scope.row.name), true)" style="cursor: pointer">{{ `${Number(scope.row.one).toFixed(2)}` }}</div>
										</template>
									</el-table-column>
									<el-table-column prop="three" label="5013" align="center">
										<template slot-scope="scope">
											<div @contextmenu.prevent.stop="checkVal(pageData['5013'].find(item => item.state_desc == scope.row.name), true)" style="cursor: pointer">{{ `${Number(scope.row.one).toFixed(2)}` }}</div>
										</template>
									</el-table-column>
									<el-table-column prop="four" label="2号主变" align="center">
										<template slot-scope="scope">
											<div @contextmenu.prevent.stop="checkVal(pageData['2号主变'].find(item => item.state_desc == scope.row.name), true)" style="cursor: pointer">{{ `${Number(scope.row.one).toFixed(2)}` }}</div>
										</template>
									</el-table-column>
									<el-table-column prop="five" label="桂元Ⅰ线" align="center">
										<template slot-scope="scope">
											<div @contextmenu.prevent.stop="checkVal(pageData['桂元I线'].find(item => item.state_desc == scope.row.name), true)" style="cursor: pointer">{{ `${Number(scope.row.one).toFixed(2)}` }}</div>
										</template>
									</el-table-column>
									<el-table-column prop="unit" label="单位" align="center"></el-table-column>
								</el-table>
							</div>
						</div>
						<div class="midCtnBtm">
							<div class="midCtnBtm_left">
								<el-table :data="tableData2" border style="width: 100%">
									<el-table-column prop="name" label="" align="center" width="70"></el-table-column>
									<el-table-column prop="dlq" label="断路器" align="center">
										<template slot-scope="scope">
											<div class="yuanfang" v-if="scope.row.dlqObj.state_desc.includes('解锁')">
												<p>联锁</p>
												<p>解锁</p>
											</div>
											<div class="yuanfang" v-else>
												<p>远方</p>
												<p>就地</p>
											</div>
											<div class="polygon-icon">
												<KongZhiBaShou
													:info="scope.row.dlqObj" 
													:name="scope.row.dlqObj.state_desc" 
													:state="Number(scope.row.dlqObj.state_val)"  
													@itemRightClick="itemRightClick" 
													:deviceName="scope.row.dlqObj.state_desc"  
													:jianGeMing="scope.row.dlqObj.jg_name"
												></KongZhiBaShou>
											</div>
										</template>
									</el-table-column>
									<el-table-column prop="dz" label="刀闸" align="center">
										<template slot-scope="scope">
											<div class="yuanfang" v-if="scope.row.dzObj.state_desc.includes('解锁')">
												<p>联锁</p>
												<p>解锁</p>
											</div>
											<div class="yuanfang" v-else>
												<p>远方</p>
												<p>就地</p>
											</div>
											<div class="polygon-icon">
												<KongZhiBaShou
													:info="scope.row.dzObj" 
													:name="scope.row.dzObj.state_desc" 
													:state="Number(scope.row.dzObj.state_val)"  
													@itemRightClick="itemRightClick" 
													:deviceName="scope.row.dzObj.state_desc"  
													:jianGeMing="scope.row.dzObj.jg_name"
												></KongZhiBaShou>
											</div>
										</template>
									</el-table-column>
									<el-table-column prop="lsbs" label="联锁把手" align="center">
										<template slot-scope="scope">
											<div class="yuanfang" v-if="scope.row.lsbsObj.state_desc.includes('解锁')">
												<p>联锁</p>
												<p>解锁</p>
											</div>
											<div class="yuanfang" v-else>
												<p>远方</p>
												<p>就地</p>
											</div>
											<div class="polygon-icon">
												<KongZhiBaShou
													:info="scope.row.lsbsObj" 
													:name="scope.row.lsbsObj.state_desc" 
													:state="Number(scope.row.lsbsObj.state_val)"  
													@itemRightClick="itemRightClick" 
													:deviceName="scope.row.lsbsObj.state_desc"  
													:jianGeMing="scope.row.lsbsObj.jg_name"
												></KongZhiBaShou>
											</div>
										</template>
									</el-table-column>
									<el-table-column prop="ykkr" label="远控开入" align="center">
										<template slot-scope="scope">
											<div class="yuanfang" v-if="scope.row.ykkrObj.state_desc.includes('解锁')">
												<p>联锁</p>
												<p>解锁</p>
											</div>
											<div class="yuanfang" v-else>
												<p>远方</p>
												<p>就地</p>
											</div>
											<div class="polygon-icon">
												<KongZhiBaShou
													:info="scope.row.ykkrObj" 
													:name="scope.row.ykkrObj.state_desc" 
													:state="Number(scope.row.ykkrObj.state_val)"  
													@itemRightClick="itemRightClick" 
													:deviceName="scope.row.ykkrObj.state_desc"  
													:jianGeMing="scope.row.ykkrObj.jg_name"
												></KongZhiBaShou>
											</div>
										</template>
									</el-table-column>
								</el-table>
							</div>
							<div class="midCtnBtm_right">
								<div class="midCtnBtm_right_top">
									<p>5011测控装置硬压板</p>
									<ul>
										<li v-for="(item, index) in pageData['5011测控装置硬压板']" :key="index">
											<div class="icon" style="cursor: pointer;"><YingYaBan :info="item" :state="Number(item.state_val)"></YingYaBan></div>
											<p>{{item.state_desc}}</p>
										</li>
									</ul>
								</div>
								<div class="midCtnBtm_right_mid">
									<p>5012测控装置硬压板</p>
									<ul>
										<li v-for="(item, index) in pageData['5012测控装置硬压板']" :key="index">
											<div class="icon" style="cursor: pointer;"><YingYaBan :info="item" :state="Number(item.state_val)"></YingYaBan></div>
											<p>{{item.state_desc}}</p>
										</li>
									</ul>
								</div>
								<div class="midCtnBtm_right_btm">
									<p>5013测控装置硬压板</p>
									<ul>
										<li v-for="(item, index) in pageData['5013测控装置硬压板']" :key="index">
											<div class="icon" style="cursor: pointer;"><YingYaBan :info="item" :state="Number(item.state_val)"></YingYaBan></div>
											<p>{{item.state_desc}}</p>
										</li>
									</ul>
								</div>
							</div>
						</div>
					</div>
					<div class="rightCtn">
						<div class="rightCtn_top">
							<p>5011测控装置软压板</p>
							<div class="rightCtnWrapper">
								<ul class="wrpperLeft">
									<li v-for="(item, index) in pageData['5011测控装置软压板'].slice(0,8)" :key="index" @click.prevent.stop="itemRightClick($event, 'ruanyaban',item.state_desc,Number(item.state_val), item.id,item.jg_name,item)">
										<div class="svgBox" style="cursor: pointer;">
											<RuanYaBan :info="item" :state="Number(item.state_val)"></RuanYaBan>
										</div>
										<!-- <p>{{item.state_desc}}</p> -->
									</li>
								</ul>
								<ul class="wrpperRight">
									<li v-for="(item, index) in pageData['5011测控装置软压板'].slice(8)" :key="index" @click.prevent.stop="itemRightClick($event, 'ruanyaban',item.state_desc,Number(item.state_val), item.id,item.jg_name,item)">
										<div class="svgBox" style="cursor: pointer;">
											<RuanYaBan :info="item" :state="Number(item.state_val)"></RuanYaBan>
										</div>
										<!-- <p>{{item.state_desc}}</p> -->
									</li>
								</ul>
							</div>
						</div>
						<div class="rightCtn_mid">
							<p>5012测控装置软压板</p>
							<div class="rightCtnWrapper">
								<ul class="wrpperLeft">
									<li v-for="(item, index) in pageData['5012测控装置软压板'].slice(0,6)" :key="index" @click.prevent.stop="itemRightClick($event, 'ruanyaban',item.state_desc,Number(item.state_val), item.id,item.jg_name,item)">
										<div class="svgBox" style="cursor: pointer;">
											<RuanYaBan :info="item" :state="Number(item.state_val)"></RuanYaBan>
										</div>
										<!-- <p>{{item.state_desc}}</p> -->
									</li>
								</ul>
								<ul class="wrpperRight">
									<li v-for="(item, index) in pageData['5012测控装置软压板'].slice(6)" :key="index" @click.prevent.stop="itemRightClick($event, 'ruanyaban',item.state_desc,Number(item.state_val), item.id,item.jg_name,item)">
										<div class="svgBox" style="cursor: pointer;">
											<RuanYaBan :info="item" :state="Number(item.state_val)"></RuanYaBan>
										</div>
										<!-- <p>{{item.state_desc}}</p> -->
									</li>
								</ul>
							</div>
						</div>
						<div class="rightCtn_btm">
							<p>5013测控装置软压板</p>
							<div class="rightCtnWrapper">
								<ul class="wrpperLeft">
									<li v-for="(item, index) in pageData['5013测控装置软压板'].slice(0,8)" :key="index" @click.prevent.stop="itemRightClick($event, 'ruanyaban',item.state_desc,Number(item.state_val), item.id,item.jg_name,item)">
										<div class="svgBox" style="cursor: pointer;">
											<RuanYaBan :info="item" :state="Number(item.state_val)"></RuanYaBan>
										</div>
										<!-- <p>{{item.state_desc}}</p> -->
									</li>
								</ul>
								<ul class="wrpperRight">
									<li v-for="(item, index) in pageData['5013测控装置软压板'].slice(8)" :key="index" @click.prevent.stop="itemRightClick($event, 'ruanyaban',item.state_desc,Number(item.state_val), item.id,item.jg_name,item)">
										<div class="svgBox" style="cursor: pointer;">
											<RuanYaBan :info="item" :state="Number(item.state_val)"></RuanYaBan>
										</div>
										<!-- <p>{{item.state_desc}}</p> -->
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</ScaleBox>
		
		<!-- ---------------------------------------------- -->
		<rightClickmenuList
		  v-if="rightMenuObj && showMenu"
		  :right-menu-obj="rightMenuObj"
		  @menuItemClick="menuItemClick"
		/>
		<el-dialog
		  custom-class="yaokongPersonDialog"
		  :visible.sync="operatorPwdDialogVisible_0"
		  width="22%"
		  :close-on-click-modal="false"
		>
		  <p slot="title" class="el-dialog__title">操作人</p>
		  <div class="operatorPwd">
		    <div class="operator">
		      <label>请输入操作人</label>
		      <el-select
		        size="small"
		        v-model="operatorPwdObj.username"
		        style="width: 16rem"
		      >
		        <el-option
		          v-for="(item, index) in userInfoJson.operatorList"
		          :key="index"
		          :label="item.username"
		          :value="item.username"
		        />
		      </el-select>
		    </div>
		    <div class="pwd">
		      <label>请输入密码</label>
		      <el-input
		        v-model="operatorPwdObj.pwd"
		        size="small"
		        type="password"
		        @keydown.enter.native="operatorPwdSubmit_0"
		      />
		    </div>
		  </div>
		  <span slot="footer" class="dialog-footer">
		    <el-button size="small" @click="operatorPwdSubmit_0">确 定</el-button>
		    <el-button size="small" @click="operatorPwdDialogVisible_0 = false">取 消</el-button>
		  </span>
		</el-dialog>
		<el-dialog
		  custom-class="yaokongPersonDialog"
		  :visible.sync="operatorPwdDialogVisible"
		  width="22%"
		  :close-on-click-modal="false"
		>
		  <p slot="title" class="el-dialog__title">监护人</p>
		  <div class="operatorPwd">
		    <div class="operator">
		      <label>请输入监护人</label>
		      <el-select
		        size="small"
		        v-model="adminPwdObj.username"
		        style="width: 16rem"
		      >
		        <el-option
		          v-for="(item, index) in userInfoJson.adminList"
		          :key="index"
		          :label="item.username"
		          :value="item.username"
		        />
		      </el-select>
		    </div>
		    <div class="pwd">
		      <label>请输入监护员密码</label>
		      <el-input
		        v-model="adminPwdObj.pwd"
		        size="small"
		        type="password"
		        @keydown.enter.native="operatorPwdSubmit"
		      />
		    </div>
		  </div>
		  <span slot="footer" class="dialog-footer">
		    <el-button size="small" @click="operatorPwdSubmit">确 定</el-button>
		    <el-button size="small" @click="operatorPwdDialogVisible = false">取 消</el-button>
		  </span>
		</el-dialog>
		<el-dialog
		  custom-class="switchPatrolDialog"
		  :visible.sync="dialogVisible"
		  :close-on-press-escape="true"
		  :close-on-click-modal="true"
		  :width="`40%`"
		  :modal="false"
		  @before-close="handleDialogClose"
		>
		  <!-- 隔离刀 -->
		  <template
		    v-if="
		      currentSelectMenuItemObj && currentSelectMenuItemObj.type == 'gelidao'
		    "
		  >
		    <!-- 遥控 - 弹框 -->
		    <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 1">
		      <p slot="title" class="el-dialog__title">遥控</p>
		      <yaokongDialog
		        :current-select-menu-item-obj="currentSelectMenuItemObj"
		        :text="yaokongMsg"
		      />
		    </template>
		
		    <!-- 开关清闪 - 弹框 -->
		    <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 2">
		      <p slot="title" class="el-dialog__title">开关清闪</p>
		    </template>
		
		    <!-- 挂牌/摘牌 - 弹框 -->
		    <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 6">
		      <p slot="title" class="el-dialog__title">挂牌/摘牌</p>
		      <guapaiDialog
		        :current-select-menu-item-obj="currentSelectMenuItemObj"
		      />
		    </template>
		
		    <span slot="footer" class="dialog-footer">
		      <el-button
		        v-if="
		          currentSelectMenuItemObj &&
		          currentSelectMenuItemObj.currentSelectItem.value != 4
		        "
		        size="small"
		        @click="dialogVisible = false"
		        >取 消</el-button>
		
		      <!-- 遥控 按钮 -->
		      <el-button
		        v-if="
		          currentSelectMenuItemObj &&
		          currentSelectMenuItemObj.currentSelectItem.value == 1 &&
		          !canyaoKong
		        "
		        size="small"
		        @click="yaokongSelect"
		        >遥控选择</el-button>
		      <el-button
		        v-if="
		          currentSelectMenuItemObj &&
		          currentSelectMenuItemObj.currentSelectItem.value == 1 &&
		          canyaoKong
		        "
		        size="small"
		        @click="remoteControlSelect"
		        >遥控执行</el-button>
		      <el-button
		        v-if="
		          currentSelectMenuItemObj &&
		          currentSelectMenuItemObj.currentSelectItem.value == 1
		        "
		        size="small"
		        type="primary"
		        plain
		        @click="dialogVisible = false"
		        >关 闭</el-button>
		      <!-- 挂牌/摘牌 按钮 -->
		      <el-button
		        v-if="
		          currentSelectMenuItemObj &&
		          currentSelectMenuItemObj.currentSelectItem.value == 6
		        "
		        size="small"
		        type="primary"
		        @click="handleBrand"
		        >确 定</el-button>
		    </span>
		  </template>
		
		  <!-- 地刀 -->
		  <template
		    v-if="
		      currentSelectMenuItemObj && currentSelectMenuItemObj.type == 'didao'
		    "
		  >
		    <!--          遥控-->
		    <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 1">
		      <p slot="title" class="el-dialog__title">遥控</p>
		      <yaokongDialog
		        :current-select-menu-item-obj="currentSelectMenuItemObj"
		        :text="yaokongMsg"
		      />
		    </template>
		    <!-- 开关清闪 - 弹框 -->
		    <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 0">
		      <p slot="title" class="el-dialog__title">开关清闪</p>
		      <span>暂无内容</span>
		    </template>
		
		    <!-- 全站清闪 - 弹框 -->
		    <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 4">
		      <p slot="title" class="el-dialog__title">全站清闪</p>
		      <span>暂无内容</span>
		      <!-- <yaokongDialog :currentSelectMenuItemObj="currentSelectMenuItemObj"></yaokongDialog> -->
		    </template>
		    <!-- 挂牌/摘牌 - 弹框 -->
		    <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 5">
		      <p slot="title" class="el-dialog__title">挂牌/摘牌</p>
		      <guapaiDialog
		        :current-select-menu-item-obj="currentSelectMenuItemObj"
		      />
		    </template>
		    <span slot="footer" class="dialog-footer">
		      <!-- 遥控 按钮 -->
		      <el-button
		        v-if="
		          currentSelectMenuItemObj &&
		          currentSelectMenuItemObj.currentSelectItem.value == 0
		        "
		        size="small"
		        @click="dialogVisible = false"
		        >取 消</el-button>
		      <el-button
		        v-if="
		          currentSelectMenuItemObj &&
		          currentSelectMenuItemObj.currentSelectItem.value == 1 &&
		          !canyaoKong
		        "
		        size="small"
		        @click="yaokongSelect"
		        >遥控选择</el-button>
		      <el-button
		        v-if="
		          currentSelectMenuItemObj &&
		          currentSelectMenuItemObj.currentSelectItem.value == 1 &&
		          canyaoKong
		        "
		        size="small"
		        @click="remoteControlSelect"
		        >遥控执行</el-button>
		      <el-button
		        v-if="
		          currentSelectMenuItemObj &&
		          currentSelectMenuItemObj.currentSelectItem.value == 1
		        "
		        size="small"
		        type="primary"
		        plain
		        @click="dialogVisible = false"
		        >关 闭</el-button>
		
		      <!-- 挂牌/摘牌 按钮 -->
		      <el-button
		        v-if="
		          currentSelectMenuItemObj &&
		          currentSelectMenuItemObj.currentSelectItem.value == 5
		        "
		        size="small"
		        type="primary"
		        @click="handleBrand"
		        >确 定</el-button>
		    </span>
		  </template>
		
		  <!-- 断路器 -->
		  <template
		    v-if="
		      currentSelectMenuItemObj &&
		      currentSelectMenuItemObj.type == 'duanluqi'
		    "
		  >
		    <!-- 遥控 - 弹框 -->
		    <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 1">
		      <p slot="title" class="el-dialog__title">遥控</p>
		      <yaokongDialog
		        :current-select-menu-item-obj="currentSelectMenuItemObj"
		        :text="yaokongMsg"
		      />
		    </template>
		    <!-- 开关清闪 - 弹框 -->
		    <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 2">
		      <p slot="title" class="el-dialog__title">开关清闪</p>
		      <span>确定要将{{
		          currentSelectMenuItemObj.currentObj.name
		        }}开关清闪吗？</span>
		      <!-- <yaokongDialog :currentSelectMenuItemObj="currentSelectMenuItemObj"></yaokongDialog> -->
		    </template>
		    <!-- 全站清闪 - 弹框 -->
		    <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 3">
		      <p slot="title" class="el-dialog__title">全站清闪</p>
		      <span>确定要将全部设备进行清闪吗？</span>
		      <!-- <yaokongDialog :currentSelectMenuItemObj="currentSelectMenuItemObj"></yaokongDialog> -->
		    </template>
		
		    <!-- 挂牌/摘牌 - 弹框 -->
		    <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 6">
		      <p slot="title" class="el-dialog__title">挂牌/摘牌</p>
		      <guapaiDialog
		        :current-select-menu-item-obj="currentSelectMenuItemObj"
		      />
		    </template>
		    <span slot="footer" class="dialog-footer">
		      <el-button
		        v-if="
		          currentSelectMenuItemObj &&
		          currentSelectMenuItemObj.currentSelectItem.value != 4
		        "
		        size="small"
		        @click="dialogVisible = false"
		        >取 消</el-button>
		      <el-button
		        v-if="
		          currentSelectMenuItemObj &&
		          currentSelectMenuItemObj.currentSelectItem.value == 2
		        "
		        size="small"
		        @click="clearFlesh"
		        >确定</el-button>
		      <el-button
		        v-if="
		          currentSelectMenuItemObj &&
		          currentSelectMenuItemObj.currentSelectItem.value == 3
		        "
		        size="small"
		        @click="clearAll"
		        >确定</el-button>
		      <!-- 遥控 按钮 -->
		      <el-button
		        v-if="
		          currentSelectMenuItemObj &&
		          currentSelectMenuItemObj.currentSelectItem.value == 1 &&
		          !canyaoKong
		        "
		        size="small"
		        @click="yaokongSelect"
		        >遥控选择</el-button>
		      <el-button
		        v-if="
		          currentSelectMenuItemObj &&
		          currentSelectMenuItemObj.currentSelectItem.value == 1 &&
		          canyaoKong
		        "
		        size="small"
		        @click="remoteControlSelect"
		        >遥控执行</el-button>
		      <el-button
		        v-if="
		          currentSelectMenuItemObj &&
		          currentSelectMenuItemObj.currentSelectItem.value == 1
		        "
		        size="small"
		        type="primary"
		        plain
		        @click="dialogVisible = false"
		        >关 闭</el-button>
		
		      <!-- 挂牌/摘牌 按钮 -->
		      <el-button
		        v-if="
		          currentSelectMenuItemObj &&
		          currentSelectMenuItemObj.currentSelectItem.value == 6
		        "
		        size="small"
		        type="primary"
		        @click="handleBrand"
		        >确 定</el-button>
		    </span>
		  </template>
		
		  <!-- 把手 -->
		  <template
		    v-if="
		      currentSelectMenuItemObj && currentSelectMenuItemObj.type == 'bashou'
		    "
		  >
		    <!-- 操作 - 弹框 -->
		    <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 1">
		      <p slot="title" class="el-dialog__title">操作</p>
		      <span>暂无内容</span>
		    </template>
		    <span slot="footer" class="dialog-footer">
		      <el-button
		        v-if="
		          currentSelectMenuItemObj &&
		          currentSelectMenuItemObj.currentSelectItem.value != 2
		        "
		        size="small"
		        @click="dialogVisible = false"
		        >取 消</el-button>
		    </span>
		  </template>
		
		  <template
		    v-if="
		      currentSelectMenuItemObj &&
		      currentSelectMenuItemObj.type == 'ruanyaban'
		    "
		  >
		    <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 1">
		      <p slot="title" class="el-dialog__title">遥控</p>
		      <yaokongDialog
		        :current-select-menu-item-obj="currentSelectMenuItemObj"
		        :text="yaokongMsg"
		      />
		    </template>
		    <span slot="footer" class="dialog-footer">
		      <el-button
		        v-if="
		          currentSelectMenuItemObj &&
		          currentSelectMenuItemObj.currentSelectItem.value == 2
		        "
		        size="small"
		        @click="dialogVisible = false"
		        >取 消</el-button>
		
		      <!-- 遥控 按钮 -->
		      <el-button
		        v-if="
		          currentSelectMenuItemObj &&
		          currentSelectMenuItemObj.currentSelectItem.value == 1 &&
		          !canyaoKong
		        "
		        size="small"
		        @click="yaokongSelect"
		        >遥控选择</el-button>
		      <el-button
		        v-if="
		          currentSelectMenuItemObj &&
		          currentSelectMenuItemObj.currentSelectItem.value == 1 &&
		          canyaoKong
		        "
		        size="small"
		        @click="remoteControlSelect"
		        >遥控执行</el-button>
		      <el-button
		        v-if="
		          currentSelectMenuItemObj &&
		          currentSelectMenuItemObj.currentSelectItem.value == 1
		        "
		        size="small"
		        type="primary"
		        plain
		        @click="dialogVisible = false"
		        >关 闭</el-button>
		    </span>
		  </template>
		</el-dialog>
		<el-dialog
		  ref="operateRecordDialogRef"
		  custom-class="operateRecordDialog"
		  :modal="false"
		  :close-on-click-modal="false"
		  v-if="operationRecordsDialogVisible"
		  :visible.sync="operationRecordsDialogVisible"
		  v-dialogDrag:{dialogDrag}="true"
		  width="35%"
		>
		  <p slot="title" class="el-dialog__title">操作记录</p>
		  <div class="messageAlarmList">
		    <el-table :data="operationRecordsData" width="100%" height="250">
		      <el-table-column
		        prop="num"
		        label="序号"
		        width="85"
		        header-align="center"
		        align="center"
		      >
		        <template #default="{ row }">
		          <span :class="{ 'is-highlight': !!row.isHighlight }">{{
		            row.num
		          }}</span>
		        </template>
		      </el-table-column>
		      <el-table-column
		        prop="createTime"
		        label="操作时间"
		        width="160"
		        header-align="center"
		        align="center"
		      >
		        <template #default="{ row }">
		          <span :class="{ 'is-highlight': !!row.isHighlight }">{{
		            row.createTime
		          }}</span>
		        </template>
		      </el-table-column>
		      <el-table-column
		        prop="log_desc"
		        label="操作描述"
		        header-align="center"
		      >
		        <template #default="{ row }">
		          <span :class="{ 'is-highlight': !!row.isHighlight }">{{
		            row.log_desc
		          }}</span>
		        </template>
		      </el-table-column>
		    </el-table>
		  </div>
		</el-dialog>
	</div>
</template>

<script src="./script.js"></script>

<style lang="less" src="./style.less" scoped></style>
